<template>
    <div class="base_context">
        <van-progress class="process"  :show-pivot="false" color="#f5a623" :percentage="percent" />
        <div class="Q_title_border" >
            <div class="Q_title" v-html="Qcontent"></div>
        </div>
        <div class="button_group_class">
            <van-button :class="{'button_class':true,'click_class':isclick(btnA),'True_class':IsRightBtn(btnA),'hide_class':IsTrueOrSelect(btnA),'wrong_class':IsWrongSelect(btnA),'True_class2':RightChoose==String(btnA).substr(0,1) }" @click="ClickBtn(btnA,Gid)" v-text="btnA">A选项</van-button>
            <van-button :class="{'button_class':true,'click_class':isclick(btnB),'True_class':IsRightBtn(btnB),'hide_class':IsTrueOrSelect(btnB),'wrong_class':IsWrongSelect(btnB),'True_class2':RightChoose==String(btnB).substr(0,1) }" @click="ClickBtn(btnB,Gid)" v-text="btnB">A选项</van-button>
            <van-button :class="{'button_class':true,'click_class':isclick(btnC),'True_class':IsRightBtn(btnC),'hide_class':IsTrueOrSelect(btnC),'wrong_class':IsWrongSelect(btnC),'True_class2':RightChoose==String(btnC).substr(0,1) }" @click="ClickBtn(btnC,Gid)" v-text="btnC">A选项</van-button>
            <van-button :class="{'button_class':true,'click_class':isclick(btnD),'True_class':IsRightBtn(btnD),'hide_class':IsTrueOrSelect(btnD),'wrong_class':IsWrongSelect(btnD),'True_class2':RightChoose==String(btnD).substr(0,1) }" @click="ClickBtn(btnD,Gid)" v-text="btnD">A选项</van-button>
        </div>
    </div>
</template>

<script>
export default {
    props:['Qcontent','btnA','btnB','btnC','btnD','Gid'],
    data(){
        return{
            RightChoose:'',
            ClickText:'',
            rightbtn:'',
            percent:100,
            t1:''
        }
    },
    mounted(){
        this.setTimer()
    },
    computed:{
        
    },
    methods:{
        ClickBtn(btnText,Gid){
            var selectbtn=String(btnText).substr(0,1).toUpperCase();
            this.$http.post(this.$config.CheckAns,{
                Gid
            }).then(res=>{
                if (res.data.Success==true) {
                    // console.log(res.data.Mydata)
                    this.ClickText=selectbtn    //点击加颜色
                    this.rightbtn=res.data.Mydata.Q_Ans.substr(0,1).toUpperCase();
                    this.Next(btnText)
                }
            })
        },
        isclick(btntext){
            if (String(btntext).substr(0,1).toUpperCase()==this.ClickText) {
                return true
            } else {
                return false;
            }
        },
        IsRightBtn(currentbtn){
            if (this.rightbtn==String(currentbtn).substr(0,1).toUpperCase()) {
                return true;
            } else {
                return false;
            }
        },
        IsTrueOrSelect(currentbtn){
            if (this.rightbtn!="" && this.rightbtn!=undefined) {
                if (this.rightbtn!=String(currentbtn).substr(0,1).toUpperCase() && String(currentbtn).substr(0,1).toUpperCase()!=this.ClickText) {
                return true;
            } else {
                return false;
            }
            }
        },
        IsWrongSelect(currentbtn){
            if (this.rightbtn!="" && this.rightbtn!=undefined){
                 return !this.IsRightBtn(currentbtn)
            }
        },
        showAnsAndPassQ(){
            this.$http.post(this.$config.CheckAns,{
                Gid:this.Gid
            }).then(res=>{
                this.rightbtn=res.data.Mydata.Q_Ans.substr(0,1).toUpperCase()
                this.IsTrueOrSelect(res.data.Mydata.Q_Ans.substr(0,1).toUpperCase())
                this.Next('F')//传一个不存在的选项，表示用户没有选。

            })
        },
        setTimer(){
            this.t1=window.setInterval(this.showpercent, 150);
        },
        showpercent(){
            this.percent--
            if (this.percent<0) {
               window.clearInterval(this.t1); 
               this.showAnsAndPassQ()
            }
        },
        isHide2(currentbtn){
            return !this.IsRightBtn(currentbtn)
        },
        Next(btnText){
            setTimeout(() => {
                        if (this.IsRightBtn(btnText)) {
                            this.$emit('NextQ',1,this.Gid)
                        }
                        else{
                            this.$emit('NextQ',0,this.Gid)
                        }
                    }, 1000);
        }
        
    }
}
</script>

<style scoped>
.base_context{
    /* border: 1px solid red; */
    margin: 5vh 5vw;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
}
.process{
    /* height: 5px; */
    background:unset;
    border: unset;
}
.Q_title_border{
    /* border: 1px solid red; */
    padding: 1vh 5vw;
    line-height: 1.6;
    height: 18vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.button_class{
    background-color: #ededed;
    width: 70vw;
    margin: 1.3vh auto;
    border-radius: 35vw;
}
.button_group_class{
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* padding-top: 2vh; */
    padding-bottom: 2vh;
    height: 40vh;;
}
.click_class{
    background-color: #66ccff;
    color: white;
}
.True_class{
    background-color: #8bbc72;
    color: white;
}
.hide_class{
    display:none;
}
.wrong_class{
    background-color: #da6368;
    color: white;
}
.True_class2{
    background-color: #8bbc72;
    color: white;
}
.hide_class2{
    display:none;
}
</style>
